<template>
    <section>
        <DetailsHeader title="通知设置" class="mb-24" />

        <div class="page-card">
            <div class="card-content">
                <div class="safe-set-list">
                    <div class="safe-list-label">
                        <svg-icon name="icon-safe-phone" style="width: 16px;height: 16px;margin-right: 8px;"></svg-icon>
                        手机通知
                    </div>
                    <div class="safe-list-con">{{ userInfo?.userItem?.phone }}</div>
                    <div class="safe-list-opt">
                        <span class="success-status mr-16" v-if="userInfo?.settings?.sms_enable">
                            <check-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">开启</span>
                        </span>

                        <span class="warning-status mr-16" v-else>
                            <info-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">未开启</span>
                        </span>
                        <a-divider type="vertical" />
                        <a-button type="link" v-if="!userInfo?.settings?.sms_enable"
                            @click="handleSeting(1, 'smsEnable')">开启</a-button>
                        <a-button type="link" v-if="userInfo?.settings?.sms_enable"
                            @click="handleSeting(0, 'smsEnable')">关闭</a-button>
                    </div>
                </div>

                <div class="safe-set-list">
                    <div class="safe-list-label">
                        <svg-icon name="icon-safe-account" style="width: 16px;height: 16px;margin-right: 8px;"></svg-icon>
                        微信通知
                    </div>
                    <div class="safe-list-con">***********</div>
                    <div class="safe-list-opt">
                        <span class="success-status mr-16" v-if="userInfo?.settings?.wechat_enable">
                            <check-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">开启</span>
                        </span>

                        <span class="warning-status mr-16" v-else>
                            <info-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">未开启</span>
                        </span>

                        <a-divider type="vertical" />
                        <a-button type="link" v-if="!userInfo?.settings?.wechat_enable"
                            @click="handleSeting(1, 'wechatEnable')">开启</a-button>
                        <a-button type="link" v-if="userInfo?.settings?.wechat_enable"
                            @click="handleSeting(0, 'wechatEnable')">关闭</a-button>
                    </div>
                </div>

                <div class="safe-set-list">
                    <div class="safe-list-label">
                        <svg-icon name="icon-safe-email" style="width: 16px;height: 16px;margin-right: 8px;"></svg-icon>
                        邮件通知
                    </div>
                    <div class="safe-list-con">{{ userInfo?.userItem?.email }}</div>
                    <div class="safe-list-opt">
                        <span class="success-status mr-16" v-if="userInfo?.settings?.email_enable">
                            <check-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">开启</span>
                        </span>

                        <span class="warning-status mr-16" v-else>
                            <info-circle-filled />
                            <span class="fz-14" style="margin-left: 4px;">未开启</span>
                        </span>

                        <a-divider type="vertical" />
                        <a-button type="link" v-if="!userInfo?.settings?.email_enable"
                            @click="handleSeting(1, 'emailEnable')">开启</a-button>
                        <a-button type="link" v-if="userInfo?.settings?.email_enable"
                            @click="handleSeting(0, 'emailEnable')">关闭</a-button>
                    </div>
                </div>

            </div>
        </div>

        <!-- 绑定微信 -->
        <BindWx v-model="bindWxVisible" v-if="bindWxVisible" />

        <!-- 绑定邮箱 -->
        <BindEmail v-model="bindEmailVisible" v-if="bindEmailVisible" />
        
    </section>
</template>

<script setup name="MessageSet">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { userMsgSetApi } from 'api/modules/api.account'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { XsyMessage } from '@/libs/util.toast'
import userInfoStore from '@/stores/userInfo.js'
import BindWx from '@/views/console/account/components/bindWx.vue'
import BindEmail from '@/views/console/account/components/bindEmail.vue'
import { storeToRefs } from 'pinia'
const useUserInfoStore = userInfoStore()
const { userInfo } = storeToRefs(useUserInfoStore);

const handleSeting = (status, type) => {
    if(status == 1 && type == 'wechatEnable' && !userInfo.value?.userItem?.isBindWechat) {
        bindWxVisible.value = true
        return
    } 

    if(status == 1 && type == 'emailEnable' && !userInfo?.value?.userItem?.email) {
        bindEmailVisible.value = true
        return
    } 

    let params = {}
    params = {
        wechatEnable: userInfo.value?.settings?.wechat_enable,
        smsEnable: userInfo.value?.settings?.sms_enable,
        emailEnable: userInfo.value?.settings?.email_enable
    }

    params[type] = status

    userMsgSetApi(params).then(res => {
        if (res.code == 0) {
            XsyMessage.success('设置成功')
            userInfoStore().getUserInfo().then(() => { })
        }
    })
}


// 未绑定微信不能设置开启通知
const bindWxVisible = ref(false)

// 未绑定邮箱不能设置开启通知
const bindEmailVisible = ref(false)

</script>

<style scoped lang="scss">
.page-card {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #E7EDF8;
    margin-bottom: 24px;

    // 安全设置
    .safe-set-list {
        border-radius: 4px;
        background: #F2F8FF;
        padding: 20px 48px 20px 24px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .safe-list-label {
            display: flex;
            align-items: center;
            color: #223354;
            font-size: 14px;
        }

        .safe-list-con {
            flex: 1;
            text-align: center;
            color: #8A93A7;
        }

        .safe-list-opt {
            min-width: 180px;
        }

        .success-status {
            color: #53C41B;
        }

        .warning-status {
            color: #FAAD14;
        }
    }

}
</style>
